<template>
  <div class="form-manager">
    <div class="form-manager-header">
      <FormManagerTabs v-model="active" :beforeChange="beforeChange" @change="pageChange" :tabs="tabs"/>
      <div class="buttons-container">
        <a-button shape="round" style="margin-right: 10px" type="primary" icon="cloud-download"
                  @click="loadFormDefinition">加载
        </a-button>
        <a-button style="margin-right: 10px" shape="round" type="primary" icon="read" @click="preview">预览</a-button>
        <a-button shape="round" type="primary" icon="save" @click="saveFormDefinition">保存</a-button>
      </div>
    </div>
    <div class="form-manager-body">
      <FormDesigner :formDefinition="formDefinition" ref="form" v-show="active === 'form'"/>
      <FormAction :actions="formDefinition.actions" ref="action" v-show="active === 'action'"/>
      <FormMenu :menus="formDefinition.menus" ref="menu" v-show="active === 'menu'"/>
      <FormFlow :flows="formDefinition.flows" ref="flow" v-show="active === 'flow'"/>
    </div>
    <FormPreview ref="FormPreview"/>
  </div>
</template>
<script>
import '@/components/hhd/design/FormManager/style.css';
import FormDesigner from '@/components/hhd/design/FormDesigner/FormDesigner.vue';
import FormManagerTabs from '@/components/hhd/design/FormManager/tabs/FormManagerTabs.vue';
import FormAction from '@/components/hhd/design/FormAction/FormAction.vue';
import FormMenu from '@/components/hhd/design/FormMenu/FormMenu.vue';
import FormFlow from '@/components/hhd/design/FormFlow/FormFlow.vue';
import {
  createFormDefinition,
  createFormDefinitionVO,
  readFormDefinitionVo
} from '@/components/hhd/design/FormDesigner/types';
import ViewsParser from '@/components/hhd/design/FormManager/ViewsParser';
import {getAction, postAction} from '@/api/manage';
import FormPreview from '@/components/hhd/design/FormManager/FormPreview.vue';

export default {
  name: 'FormManager',
  components: {FormPreview, FormFlow, FormMenu, FormAction, FormManagerTabs, FormDesigner},
  data() {
    return {
      active: undefined,
      formDefinition: createFormDefinition(),
      tabs: [
        {title: "表单设计", key: 'form'},
        {title: "操作设置", key: 'action'},
        {title: "业务列表设置", key: 'menu'},
        {title: "流程模板设置", key: 'flow'},
      ]
    };
  },
  methods: {
    beforeChange(active, change) {
      if (this.$refs[active] && this.$refs[active].check) {
        this.$refs[active].check().then(() => {
          change();
        }).catch(console.error);
      } else {
        change();
      }
    },
    pageChange() {
      this.$nextTick(() => {
        let ref = this.$refs;
        ref[this.active] && ref[this.active].active && ref[this.active].active(this.$refs.form.formDefinition);
      });
    },
    readFormDefinition(formDefinitionVo) {
      this.formDefinition = readFormDefinitionVo(formDefinitionVo);
      this.$nextTick(() => {
        this.$refs.form.selectedView = this.formDefinition.views[0].id;
        this.$refs.form.viewChange();
      });
    },
    loadFormDefinition() {
      this.loading = true;
      getAction('/form/queryById', {id: '17950eceaa704dfd9491beb81f93670d'}).then(data => {
        if (data.success) {
          this.readFormDefinition(data.result);
        } else {
          this.$notification.error({message: data.message, duration: 3});
        }
        this.loading = false;
      }).catch(error => {
        console.log(error);
        this.loading = false;
        this.$notification.error({message: error, duration: 3});
      });
    },
    preview() {
      let formDefinition = {
        ...this.$refs.form.formDefinition,
        actions: this.$refs.action.actions,
        menus: this.$refs.menu.menus,
        flows: this.$refs.flow.flows,
      };

      let callback = () => {
        new ViewsParser(formDefinition).parse();
        this.$refs.FormPreview.setData(formDefinition);
      }

      let action = this.$refs.action.check(formDefinition);
      let menu = this.$refs.menu.check(formDefinition);
      let flow = this.$refs.flow.check(formDefinition);
      let form = this.$refs.form.check();
      form.then(action).then(menu).then(flow).then(callback).catch(console.error);
    },
    doSaveFormDefinition(formDefinition) {
      formDefinition = createFormDefinitionVO(formDefinition);
      this.loading = true;
      postAction('/form/save', formDefinition).then(data => {
        if (data.success) {
          this.$notification.success({message: data.message, duration: 3});
        } else {
          this.$notification.error({message: data.message, duration: 3});
        }
        this.loading = false;
      }).catch(error => {
        console.log(error);
        this.loading = false;
        this.$notification.error({message: error, duration: 3});
      });
    },
    saveFormDefinition() {
      let form = this.$refs.form.check();
      let action = this.$refs.action.check(this.$refs.form.formDefinition);
      let menu = this.$refs.menu.check(this.$refs.form.formDefinition);
      let flow = this.$refs.flow.check(this.$refs.form.formDefinition);

      let callback = () => {
        let formDefinition = {
          ...this.$refs.form.formDefinition,
          actions: this.$refs.action.actions,
          menus: this.$refs.menu.menus,
          flows: this.$refs.flow.flows,
        };
        new ViewsParser(formDefinition).parse();
        this.doSaveFormDefinition(formDefinition);
      };

      form.then(action).then(menu).then(flow).then(callback).catch(console.error);
    },
  }
};
</script>